<template>
  <div class="recommend">
    <div class="mainbox">
      <!-- 头部 -->
      <header>
        <div class="left iconfont icon-hanbaocaidan" @click.stop="showsidebar"></div>
        <div class="center" @click.stop="tosearch">
          <input type="text" />
          <div class="place-holder">
            <span class="iconfont icon-sousuo"></span>风吹一夏 - DP 龙猪
          </div>
        </div>
        <div class="right iconfont icon-maikefeng-shi"></div>
      </header>
      <!-- 轮播图 -->
      <div class="banner">
        <div class="imgbox">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(ele,index) in imgson" :key="index">
              <img :src="ele.pic" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 图标列表 -->
      <div class="iconbox swiper-container">
        <div class="minbox swiper-wrapper">
          <div class="iconson swiper-slide" v-for="ele in iconson" :key="ele.id">
            <div class="son">
              <img :src="ele.iconUrl" alt />
            </div>
            <div>{{ele.name}}</div>
          </div>
        </div>
        <div class="swiper-scrollbar"></div>
      </div>
      <!-- 推荐歌单 -->
      <div class="recommendbox">
        <div class="topbox">
          <div class="left">推荐歌单</div>
          <div class="right">更多 ></div>
        </div>
        <div class="bottombox swiper-main">
          <div class="flexbox swiper-wrapper">
            <div class="minbox swiper-slide" v-for="ele in recommendson" :key="ele.id" @click.stop="enterPlayList(ele.id)">
              <div class="imgbox">
                <div class="play-count">
                  <i class="iconfont icon-24gl-play"></i>
                  {{ele.playCount|million}}
                </div>
                <img :src="ele.picUrl" alt />
              </div>
              <div class="contentbox">{{ele.name}}</div>
            </div>
            <div class="more swiper-slide">
              <div class="verticalbox">
                <i class="iconfont icon-56"></i>
                左滑更多
              </div>
            </div>
          </div>
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
    </div>
    <!-- 推荐歌曲 -->
    <div class="songbox">
      <div class="topbox">
        <div class="left">
          <i class="iconfont icon-shuaxin"></i> 温柔岁月的华语情怀
        </div>
        <div class="right" @click="playMusic(0,0,true)">
          <i class="iconfont icon-bofang"></i> 播放
        </div>
      </div>
      <div class="bottombox swiper-song">
        <div class="flexbox swiper-wrapper">
          <div class="slide-box swiper-slide" v-for="(ele,index) in songson" :key="index">
            <div class="minbox" v-for="(item,i) in ele" :key="item.id" @click="playMusic(index,i)">
              <div class="imgbox">
                <i class="iconfont icon-bofang"></i>
                <img :src="item.picUrl" />
              </div>
              <div class="detail">
                <span class="song-name">{{item.name}}</span> -
                <span class="singer">{{item.singername}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐音乐视频 -->
    <div class="videobox"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  props: ["imgson", "iconson", "recommendson", "songson"],
  methods: {
    tosearch(){
      this.$emit("tosearchson");
    },
    enterPlayList(id){
      this.$emit("enter-play-listson",id);
    },
    showsidebar() {
      this.$emit("showsidebarson");
    },
    playMusic(bigindex, smallindex, main = false) {
      this.$emit("play-musicson", bigindex, smallindex, main);
    },
  },
  filters: {
    million(value) {
      if (value > 10000) {
        value = parseInt(value / 10000);
      }
      if (value > 10000) {
        return parseInt(value / 10000) + "亿";
      } else {
        return (value += "万");
      }
    },
  },
  mounted() {
    new Swiper(".swiper-container", {
      pagination: ".swiper-pagination",
      slidesPerView: 5,
      paginationClickable: true,
      spaceBetween: 25,
      observer: true,
      observeParents: true,
    });
    new Swiper(".swiper-main", {
      pagination: ".swiper-pagination",
      slidesPerView: "auto",
      paginationClickable: true,
      spaceBetween: 10,
      observer: true,
      observeParents: true,
    });
    new Swiper(".swiper-song", {
      pagination: ".swiper-pagination",
      paginationClickable: true,
      observer: true,
      observeParents: true,
    });
  },
};
</script>

<style lang="less">
header {
  margin-top: 49px;
  display: flex;
  height: 35px;
  line-height: 35px;
  .left,
  .right {
    flex: 0 0 40px;
    text-align: center;
    font-size: 24px;
    color: white;
  }
  .center {
    flex: 1;
    position: relative;
    input {
      width: 100%;
      border: none;
      border-radius: 10000px;
      background-color: rgba(255, 255, 255, 0.135);
    }
    .place-holder {
      top: 0;
      position: absolute;
      font-size: 14px;
      width: 100%;
      text-align: center;
      color: rgba(255, 255, 255, 0.445);
      span {
        font-size: 14px !important;
        margin-right: 5px;
      }
    }
  }
}
.banner {
  margin: 19px 16px 0 16px;
  box-sizing: border-box;
  .imgbox {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}

.iconbox {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 16px;
  padding-bottom: 16px;
  width: 100%;
  .swiper-scrollbar {
    display: none;
  }
  .minbox {
    display: flex;
    height: 61px;
    margin-left: 16px;
    .iconson {
      text-align: center;
      color: #ccc;
      text-align: center;
      font-size: 11px;
      .son {
        margin: 0 auto;
        width: 42px;
        height: 42px;
        line-height: 42px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        img {
          width: 100%;
          // opacity: 0;
          transform: translate(-40px, -40px);
          filter: drop-shadow(40px 40px #f1f1f1);
        }
      }
    }
  }
}
.recommendbox {
  padding-bottom: 20px;
  margin-top: 10px;
  .topbox {
    color: #fefefe;
    height: 25px;
    line-height: 25px;
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    .left {
      font-size: 17px;
      letter-spacing: 2px;
    }
    .right {
      font-size: 11px;
      font-weight: lighter;
      width: 58px;
      border-radius: 10000px;
      text-align: center;
      border: 1px solid #ffffff2c;
    }
  }
  .bottombox {
    overflow: hidden;
    padding-left: 16px;
    margin-top: 14px;

    .swiper-scrollbar {
      display: none;
    }
    .flexbox {
      display: flex;
      .more {
        background-color: #ffffff21;
        text-align: center;
        border-radius: 8px;
        width: 53px;
        height: 103px;
        .verticalbox {
          display: inline-block;
          width: 12px;
          color: rgba(255, 255, 255, 0.364);
        }
      }
      .minbox {
        display: flex;
        flex-direction: column;
        width: 106px;

        .imgbox {
          height: 106px;
          border-radius: 8px;
          overflow: hidden;
          position: relative;
          .play-count {
            text-align: center;
            top: 4px;
            right: 4px;
            width: 60px;
            height: 15px;
            border-radius: 10000px;
            position: absolute;
            background-color: rgba(167, 167, 167, 0.64);
            color: #efefef;
            font-size: 9px;
            letter-spacing: 1px;
            i {
              font-size: 9px;
            }
          }
          img {
            width: 100%;
          }
        }
        .contentbox {
          color: white;
          font-weight: lighter;
          margin-top: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 11px;
          line-height: 1.2;
          letter-spacing: 1px;
        }
      }
    }
  }
}
.songbox {
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.06);
  margin-top: 10px;
  padding: 22px 16px 0 16px;
  .topbox {
    color: #fefefe;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 17px;
      letter-spacing: 1px;
    }
    .right {
      i {
        font-size: 9px;
      }
      font-size: 11px;
      font-weight: lighter;
      width: 58px;
      border-radius: 10000px;
      text-align: center;
      border: 1px solid #ffffff2c;
    }
  }
  .bottombox {
    margin-top: 14px;
    overflow: hidden;
    .flexbox {
      display: flex;
      .slide-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        .minbox {
          padding-bottom: 12px;
          width: 100%;
          display: flex;
          &:last-child {
            .detail {
              border: none;
            }
          }
          .imgbox {
            margin-right: 11px;
            width: 48px;
            height: 48px;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            i {
              position: absolute;
              margin: auto;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              font-size: 14px;
              width: 14px;
              height: 14px;
              color: rgba(255, 255, 255, 0.9);
            }
            img {
              width: 100%;
            }
          }
          .detail {
            flex: 1;
            height: 48px;
            line-height: 48px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.274);
            font-weight: lighter;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);

            .song-name {
              font-size: 14px;
              color: #fefefe;
              font-weight: normal;
            }
          }
        }
      }
    }
    .swiper-pagination {
      display: none;
    }
  }
}
.videobox {
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.06);
  margin-top: 10px;
  padding: 22px 16px 0 16px;
}
</style>